<template>
	<el-breadcrumb separator="/">
	  <el-breadcrumb-item :to="{ path: '/administrator/AdministerPicture' }">首页</el-breadcrumb-item>
	  <el-breadcrumb-item>AQI指数分布统计</el-breadcrumb-item>
	</el-breadcrumb>
	<div class="province-statistics">AQI指数分布统计</div>
	<el-table :data="tableData" style="width: 100%">
	  <el-table-column prop="id" label="AQI指数等级" width="50"></el-table-column>
	  <el-table-column prop="AQI_discription" label="AQI指数等级描述"></el-table-column>
	  <el-table-column prop="Number" label="AQI指数等级分布统计"></el-table-column>    
	</el-table>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue';
	import axios from 'axios';
	import { useRouter } from 'vue-router';
	import { ElMessage } from 'element-plus';
</script>

<style scoped>
	.province-statistics {
	  background-color: #90EE90;
	  color: white;
	  padding: 10px;
	  text-align: left;
	  font-size: 16px;
	}
	.pagination-container {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 50px; /* 或者你想要的高度 */
	}
</style>